{% extends "layout.html" %} {% block content %}
<div
    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-100 to-indigo-200 p-4"
>
    <div
        class="bg-white w-full max-w-4xl rounded-xl shadow-2xl overflow-hidden"
    >
        <!-- 标题头 -->
        <div class="bg-indigo-600 p-6 text-center">
            <h1 class="text-3xl font-bold text-white">图书管理系统</h1>
            <p class="text-indigo-200 mt-2">Library Management System</p>
        </div>

        <!-- 错误提示区域 -->
        {% if let Some(err) = error %}
        <div
            class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mx-6 mt-6"
            role="alert"
        >
            <p class="font-bold">提示</p>
            <p>{{ err }}</p>
        </div>
        {% endif %}

        <div class="flex flex-col md:flex-row">
            <!-- 左侧：登录 -->
            <div class="w-full md:w-1/2 p-8 md:border-r border-gray-200">
                <h2
                    class="text-2xl font-semibold text-gray-700 mb-6 flex items-center"
                >
                    <svg
                        class="w-6 h-6 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
                        ></path>
                    </svg>
                    用户登录
                </h2>
                <form action="/login" method="POST" class="space-y-4">
                    <div>
                        <label class="block text-gray-600 mb-1">用户名</label>
                        <input
                            type="text"
                            name="username"
                            required
                            class="w-full border border-gray-300 px-4 py-2 rounded focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
                        />
                    </div>
                    <div>
                        <label class="block text-gray-600 mb-1">密码</label>
                        <input
                            type="password"
                            name="password"
                            required
                            class="w-full border border-gray-300 px-4 py-2 rounded focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
                        />
                    </div>
                    <button
                        type="submit"
                        class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition font-semibold shadow-md"
                    >
                        立即登录
                    </button>
                </form>
            </div>

            <!-- 右侧：注册 -->
            <div class="w-full md:w-1/2 p-8 bg-gray-50">
                <h2
                    class="text-2xl font-semibold text-gray-700 mb-6 flex items-center"
                >
                    <svg
                        class="w-6 h-6 mr-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
                        ></path>
                    </svg>
                    注册新账号
                </h2>
                <form action="/register" method="POST" class="space-y-4">
                    <div>
                        <label class="block text-gray-600 text-sm mb-1"
                            >用户名</label
                        >
                        <input
                            type="text"
                            name="username"
                            required
                            class="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:border-green-500"
                        />
                    </div>
                    <div>
                        <label class="block text-gray-600 text-sm mb-1"
                            >邮箱</label
                        >
                        <input
                            type="email"
                            name="email"
                            required
                            class="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:border-green-500"
                        />
                    </div>
                    <div>
                        <label class="block text-gray-600 text-sm mb-1"
                            >密码</label
                        >
                        <input
                            type="password"
                            name="password"
                            required
                            class="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:border-green-500"
                        />
                    </div>
                    <div>
                        <label class="block text-gray-600 text-sm mb-1"
                            >个人简介</label
                        >
                        <textarea
                            name="intro"
                            rows="2"
                            placeholder="一句话介绍自己..."
                            class="w-full border border-gray-300 px-3 py-2 rounded focus:outline-none focus:border-green-500"
                        ></textarea>
                    </div>
                    <button
                        type="submit"
                        class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition font-semibold shadow-md"
                    >
                        注册账号
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- 底部版权 -->
    <div class="fixed bottom-4 text-blue-800 text-sm opacity-60">
        &copy; 2023 Library System. Rust + HTMX + Axum
    </div>
</div>
{% endblock %}
